<div id="eval-content">
    <div id="choice-section" class="max-w-lg mx-auto bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md text-center">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-200">A/B Video Evaluation</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-4 mb-6">Participate in existing studies or create your own.</p>
        <div class="space-y-4">
            <div class="relative">
                <button id="participate-button" class="w-full bg-green-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-green-700 flex items-center justify-center">
                    <span>Participate in Veo Prompt Format Study</span>
                    <svg id="info-icon" class="ml-2 w-5 h-5 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </button>
                <div id="veo-study-details" class="hidden mt-2 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4 text-left">
                    <h3 class="font-semibold text-blue-900 dark:text-blue-200 mb-2">About the Veo Study</h3>
                    <p class="text-sm text-blue-800 dark:text-blue-300">This study evaluates the impact of prompt format on video quality. You'll compare videos generated using <strong>JSON-structured prompts</strong> versus <strong>plain text prompts</strong>.</p>
                </div>
            </div>
            <button id="create-button" class="w-full bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700">Create Your Own Study</button>
        </div>
    </div>

    <div id="setup-section" class="hidden max-w-2xl mx-auto bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-200 text-center">Create Your Own Study</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-4 mb-6 text-center">Upload local files or paste public URLs. Both groups must have the same number of videos.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Group A Videos</label>
                <input type="file" id="group-a-files" multiple accept="video/*" class="w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-white dark:file:bg-gray-600 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 file:text-gray-700 dark:file:text-gray-200 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700">
                <textarea id="group-a-urls" rows="4" class="mt-2 w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Or paste URLs (one per line)"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Group B Videos</label>
                <input type="file" id="group-b-files" multiple accept="video/*" class="w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-white dark:file:bg-gray-600 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 file:text-gray-700 dark:file:text-gray-200 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700">
                <textarea id="group-b-urls" rows="4" class="mt-2 w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Or paste URLs (one per line)"></textarea>
            </div>
        </div>
        <div class="mt-6 flex items-center justify-center">
            <label class="flex items-center">
                <input type="checkbox" id="randomize-pairs-checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Randomize video pairs</span>
            </label>
        </div>
        <div class="mt-8 grid grid-cols-2 gap-4">
            <button id="back-button-creator" class="w-full bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-3 px-4 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500">Back</button>
            <button id="start-eval-button-creator" class="w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 disabled:bg-indigo-400" disabled>Start Evaluation</button>
        </div>
    </div>

    <div id="main-eval-content" class="hidden">
        <header class="text-center mb-8 relative">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-200" id="study-title">A/B Video Evaluation</h1>
            <p id="study-subtitle" class="text-gray-600 dark:text-gray-400 mt-2"></p>
        </header>
        <main>
            <p id="progress-counter" class="text-lg font-semibold text-center mb-4 text-gray-800 dark:text-gray-200"></p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                <div>
                    <h2 class="text-xl font-semibold mb-4 text-center text-gray-800 dark:text-gray-200">Video A</h2>
                    <div class="video-container bg-black rounded-md">
                        <iframe id="video-a" class="w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        <video id="video-a-tag" controls playsinline class="w-full h-full bg-black rounded-md hidden"></video>
                    </div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-4 text-center text-gray-800 dark:text-gray-200">Video B</h2>
                    <div class="video-container bg-black rounded-md">
                        <iframe id="video-b" class="w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        <video id="video-b-tag" controls playsinline class="w-full h-full bg-black rounded-md hidden"></video>
                    </div>
                </div>
            </div>
            <div id="questions-container" class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700"></div>
            <div class="mt-8 text-center space-x-4">
                <button id="previous-pair" class="bg-gray-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-500" disabled>Previous</button>
                <button id="submit-vote" class="bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 disabled:bg-gray-400">Submit & Next</button>
            </div>
            <div class="mt-4 text-center">
                <button id="back-to-choice-button" class="text-sm text-gray-600 dark:text-gray-400 hover:underline"> &larr; Back to Main Menu</button>
            </div>
        </main>
    </div>

    <div id="thank-you-section" class="hidden max-w-3xl mx-auto">
        <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
            <h2 class="text-3xl font-bold text-green-600 dark:text-green-400 text-center">Evaluation Complete!</h2>
            <div id="results-summary" class="mt-8">
                <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Your Results</h3>
                <div id="results-chart" class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg border border-gray-200 dark:border-gray-600"></div>
            </div>
            <div id="results-interpretation" class="mt-6 bg-blue-50 dark:bg-blue-900 p-6 rounded-lg border border-blue-200 dark:border-blue-700">
                <h4 class="font-semibold text-blue-900 dark:text-blue-200 mb-2">Analysis</h4>
                <div id="interpretation-text" class="text-sm text-blue-800 dark:text-blue-300"></div>
            </div>
            <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
                <button id="download-results" class="bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700">Download Results (CSV)</button>
                <button id="back-to-menu-final" class="bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-3 px-6 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500">Back to Main Menu</button>
            </div>
        </div>
    </div>
</div>
